<!--
 * @Author: modefy
 * @Date: 2021-12-06 10:13:57
 * @LastEditors: modefy
 * @LastEditTime: 2023-05-11 14:47:51
 * @Description: Description
-->
<template>
  <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" background-color="#303133" text-color="#fff"
    active-text-color="#409eff" :collapse="store.state.opened">
    <div v-for="(item, index) in newRoutes" :key="index">
      <div v-if="item.children.length === 1">
        <el-menu-item :index="item.path + item.children[0].path" @click="toPath(item.path, item.children[0].path)">
          <!-- <i :class="item.children[0].meta.icon"></i> -->
          <component v-if="item.children[0].meta.icon" style="width: 20px;margin-right: 4px;"
            :is="`${item.children[0].meta.icon}`"></component>
          <template v-slot:title>
            <span>{{ item.children[0].meta.title }}</span>
          </template>
        </el-menu-item>
      </div>
      <div v-else>
        <el-sub-menu :index="item.path">
          <template v-slot:title>
            <!-- <i :class="item.meta.icon"></i> -->
            <component style="width: 20px;margin-right: 4px;" :is="`${item.meta.icon}`"></component>
            <span v-show="!store.state.opened">{{ item.meta.title }}</span>
          </template>
          <el-menu-item v-for="(iitem, iindex) in item.children" :index="item.path + '/' + iitem.path" :key="iindex"
            @click="toPath(item.path, iitem.path)">
            <span>{{ iitem.meta.title }}</span>
          </el-menu-item>
        </el-sub-menu>
      </div>
    </div>
  </el-menu>
</template>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 210px;
  min-height: 400px;
}
</style>

<script>
import { useStore } from "vuex";
import { useRoute, useRouter } from 'vue-router';
import { routes } from 'router';
import { computed } from "vue";


export default {
  setup() {
    const store = useStore();

    let newRoutes = [];
    routes.map(item => {
      if (!item?.meta?.isHidden) {
        item.children = item.children.filter(iitem => !iitem.meta.isHidden)
        newRoutes.push(item);
      }
    });
    const router = useRouter();
    const toPath = (pPath, path) => {
      if (pPath === '/') {
        router.push(pPath + path);
        return
      }
      router.push(pPath + '/' + path);
    }

    const activeMenu = computed(() => {
      const route = useRoute();
      return route.path;
    });


    return { activeMenu, store, toPath, newRoutes }
  }
}
</script>